<template>
  <!--分组的 option-->
  <el-input style="display: none;"
    type="textarea"
    v-model="optionJson"
    :id="'c' + columnId"
    :name="'c' + columnId"
    :size="size"
  >
  </el-input>
  <div>
    <!--设置选项-->
    <el-row>
      <el-col :span="5">
        <el-switch v-model="valueKind" v-bind="valueKindProps"></el-switch>
      </el-col>
      <el-col :span="3">
        <CirclePlus @click="add" style="cursor: pointer; width: 1.5em; height: 1.5em; "/>
      </el-col>
      <el-col :span="15">
        分组/value/lable/禁用/删除
      </el-col>
    </el-row>
    <!--遍历-->
    <el-row v-for="(item, index) in optionList" :key="index">
      <el-col :span="1">
        <el-checkbox v-model="item.isGroup" v-bind="groupProps"></el-checkbox>
      </el-col>
      <el-col :span="8">
        <template v-if="!item.isGroup">
          <el-input
            v-if="valueKind==='s'"
            :tabindex="800 + index"
            v-model="item.values"
            size="mini"
          ></el-input>
          <el-input-number
            v-else
            :tabindex="800 + index"
            v-model="item.value"
            v-bind="valueProps">
          </el-input-number>
        </template>
      </el-col>
      <el-col :span="13">
        <el-input
          v-model="item.label"
          size="mini"
          :tabindex="1500 + index"></el-input>
      </el-col>
      <el-col :span="1">
        <el-checkbox
          :tabindex="2500 + index"
          v-model="item.disabled"
          size="mini"
          ></el-checkbox>
      </el-col>
      <el-col :span="1">
        <el-icon><close-bold @click="del(item.value)" style="cursor: pointer; width: 1.0em; height: 1.0em; margin-right: 8px;"/></el-icon>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import { defineComponent, reactive, ref, computed, watch } from 'vue'
  import { CirclePlus, CloseBold } from '@element-plus/icons'

    // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController } from '../../mapController.js'

  // value 类型的切换标识
  const valueKindProps = {
    'inline-prompt': true,
    'active-text': 'number',
    'inactive-text': 'string',
    'active-value': 'n',
    'inactive-value': 's',
    'inactive-color': '#E8872C'
  }

  // value 的 属性
  const valueProps = {
    style: {'width': '80px'},
    'controls-position': 'right',
    size: 'mini',
    max: 999,
    min: 1,
    maxLength: 3
  }

  // 分组标识
  const groupProps = {
    size: 'mini'
  }

  // 根据分组序号，获取下面的子成员
  /**
   * * [
   * * *  {
   * * *    label: '分组名称',
   * * *    options: [
   * * *      {
   * * *        value: '',
   * * *        label: '',
   * * *        disabled: false
   * * *      }
   * * *    ]
   * * *  }
   * * ]
   */
  const getOptions = (arr, start) => {
    const options = []
    // 找到符合条件的子选项
    for (let i = start; i < arr.length; i++) {
      const opt = arr[i]
      if (opt.isGroup) { // 下一个分组，退出
        return options
      }
      // 加入子选项
      options.push({
        value: opt.value,
        label: opt.label,
        disabled: opt.disabled
      })
    }
    return options
  }

  /**
   * 编辑列表的 option
   */
  export default defineComponent({
    name: 'el-from-item-option',
    components: {
      CirclePlus, CloseBold
    },
    props: {
      modelValue: [String, Number],
      ...itemProps, // 基础属性,
      rows: {
        type: Number,
        default: 3
      }
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      // console.log('对行文本框的属性：', props)
      const {
        value,
        run,
        clear
      } = itemController(props, context.emit)

      // value 的类型
      const valueKind = ref(false)

      // option 的列表
      const optionList = reactive([]) // value.value

      // 显示内容
      const optionJson = computed(() => JSON.stringify(optionList, null, 2))

      // 添加选项
      const add = () => {
        const len = optionList.length + 1
        optionList.push({
          isGroup: false,
          value: len,
          values: len.toString(),
          label: '',
          disabled: false
        })
      }

      // 删除选项
      const del = (val) => {
        const index = optionList.findIndex((item) => item.value === val)
        // 删除
        optionList.splice(index, 1)
      }

      // 监听，同步，把单层变双层
     
      watch([optionList, valueKind], () => {
        value.value.length = 0
        let i = 0
        optionList.forEach(op => {
          i++
          if (op.isGroup) {
            value.value.push({
              label: op.label,
              options: getOptions(optionList, i)
            })
          }
        })
      })

      return {
        // value 的 属性和值
        valueProps,
        valueKind,
        valueKindProps,
        groupProps,
        // 数据列表
        optionList,
        optionJson,
        add,
        del,
        // 返回属性值
        value,
        run,
        clear
      }
    }
  })
</script>